<template>
  <dl>
    <dd
      v-for="content in articleList"
      :key="content.id"
      @click="toDetail(content.id)"
    >
      <div class="item">
        <div class="top">
          <span class="author">
            {{ content.author }}
            <span class="cutoffrule"> | </span>
          </span>
          <span class="date">
            {{ content.date }}
            <span class="cutoffrule"> | </span>
          </span>
          <span class="maintitle">{{ content.maintitle }}</span>
          <span class="subHead">-{{ content.subhead }}</span>
        </div>
        <div class="bottom">
          <div class="list-left">
            <div class="title">{{ content.title }}</div>
            <div class="decription">{{ content.description }}</div>
            <div class="other">
              <div class="pageview">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-yanjing1"></use>
                </svg>
                <span> {{ content.pageview }}</span>
              </div>
              <div class="like">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-zan1"></use>
                </svg>
                <span> {{ content.like }}</span>
              </div>
              <div class="dislike">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-dislike__easy"></use>
                </svg>
                <span> {{ content.dislike }}</span>
              </div>
              <div class="discuss">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-pinglun1"></use>
                </svg>
                <span> {{ content.discuss }}</span>
              </div>
            </div>
          </div>
          <div class="list-right">
            <img :src="content.imgurl" alt="图片走丢了噢~" />
          </div>
        </div>
      </div>
    </dd>
  </dl>
</template>

<script>
export default {
  props: ['articleList'],
  methods: {
    toDetail (id) {
      this.$router.push(`particulars:id=${id}`)
    }
  }
}
</script>

<style lang="less" scoped>
dl {
  width: 100%;
  dd {
    height: 100px;
    margin: 15px;
    margin-bottom: 0px;
    border-bottom: 1px solid gray;
    box-shadow: 1px 1px 3px gray;
    cursor: pointer;
    &:last-child {
      border: none;
    }
    .item {
      .top {
        height: 20px;
        line-height: 20px;
        margin-left: 6px;
        .author {
          color: cornflowerblue;
          .cutoffrule {
            color: rgba(128, 128, 128, 0.5);
          }
        }
        .date {
          color: darkcyan;
          @media screen and (max-width: 750px) {
            display: none;
          }
          .cutoffrule {
            color: rgba(128, 128, 128, 0.5);
          }
        }
        .maintitle {
          color: darkred;
        }
        .subHead {
          color: darkviolet;
        }
      }
      .bottom {
        display: flex;
        .list-left {
          flex: 1 1 auto;
          .title {
            height: 30px;
            line-height: 30px;
            font-weight: bold;
            margin-left: 6px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
          }
          .decription {
            height: 20px;
            line-height: 20px;
            margin-left: 6px;
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
          }
          .other {
            height: 30px;
            line-height: 30px;
            display: flex;
            margin-left: 6px;
            .pageview,
            .like,
            .dislike {
              margin-right: 10px;
            }
          }
        }
        .list-right {
          position: relative;
          top: -10px;
          height: 91px;
          padding-right: 10px;
          img {
            width: 120px;
          }
        }
      }
    }
  }
}
</style>
